<template>
  <div class="container" v-if="articleContent">
    <PcHeader class="header"></PcHeader>
    <div class="article-box">
      <h3 class="article-title">{{articleContent.indexTitle}}</h3>
      <p
        class="article-time"
      >时间:&nbsp;&nbsp;{{getTime(articleContent.createTime)}}&nbsp;&nbsp;浏览:&nbsp;&nbsp;{{articleContent.indexType}}&nbsp;次</p>
      <p class="article-content" v-html="articleContent.indexContent"></p>
      <div class="article-list">
        <div class="pre" v-show="preTitle" @click="handleChangeArticle(preTitle.id)">
          <h3>上一篇</h3>
          <p>{{preTitle.indexTitle}}</p>
        </div>
        <div class="next" v-show="nextTitle" @click="handleChangeArticle(nextTitle.id)">
          <h3>下一篇</h3>
          <p>{{nextTitle.indexTitle}}</p>
        </div>
      </div>
    </div>
    <backTop/>
    <PcFooter></PcFooter>
  </div>
</template>
<script>
import PcHeader from "@/components/PcHeader/index.vue";
import PcFooter from "@/components/PcFooter/index.vue";
import backTop from "@/components/BackTop/index.vue";
import { getNewsContent, getNews } from "@/api/PC-Home";
export default {
  components: { PcHeader, PcFooter, backTop },
  metaInfo: {
    title: "领雁智远-智能时代的推动者",
    meta: [
      {
        name: "keywords",
        content: "智远,企业动态"
      },
      {
        name: "description",
        content: "智远,企业动态"
      }
    ]
  },
  computed: {},
  data() {
    return {
      selectChangeIndex: 0,
      selectMeList: {},
      certificationList: null,
      activeImg: "u321.png",
      bannerImgList: [],
      tabList: [],
      activeIndex: 0,
      aboutUs: null,
      enterpriseCulture: null,
      articleId: null,
      articleContent: null,
      preTitle: null,
      nextTitle: null,
    };
  },
  mounted() {
    this.getQueryId();
  },
  methods: {
    getTime(timestamp) {
      if (!timestamp) return;
      let time = timestamp.replace(/-/g,'/')
      let date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear(),
        M =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1,
        D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + "年" + M + "月" + D + "日";
    },
    returnImg(url) {
      return process.env.VUE_APP_URL + "/" + url;
    },
    getQueryId() {
      this.articleId = this.$route.query.articleId;
      this.parentId = this.$route.query.parentId;
      if (this.articleId) {
        this.getNewsContent();
      }
      this.getNews();
    },
    handleChangeImg(item) {
      this.activeImg = item.indexImg;
    },
    getNewsContent() {
      let param = {
        id: this.articleId
      };
      getNewsContent(param).then(res => {
        this.articleContent = res.data;
      });
    },
    getNews() {
      let param = {
        parentId: this.$route.query.parentId,
        current: 1,
        size: 99999
      };
      getNews(param).then(res => {
        this.tableData = res.data.records;
        let length = this.tableData.length;
        this.tableData.map((item, index) => {
          if (item.id === this.articleId) {
            if (index === 0) {
              this.preTitle = this.tableData[length - 1];
            } else {
              this.preTitle = this.tableData[index - 1];
            }
            if (index === length - 1) {
              this.nextTitle = this.tableData[0];
            } else {
              console.log(this.tableData[index + 1])
              this.nextTitle = this.tableData[index + 1];
            }
          }
        });
      });
    },
    handleChangeArticle(id) {
      let timer = null;
      this.articleId = id;
      this.getNewsContent();
      let length = this.tableData.length;
      console.log(length,this.articleId)
      this.tableData.map((item, index) => {
        if (item.id === this.articleId) {
          if (index === 0) {
            this.preTitle = this.tableData[length - 1];
          } else {
            this.preTitle = this.tableData[index - 1];
          }
          if (index === length - 1) {
            this.nextTitle = this.tableData[0];
          } else {
            this.nextTitle = this.tableData[index + 1];
          }
        }
      });
      timer = setInterval(function() {
        let backTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        let speedTop = backTop / 5;
        document.documentElement.scrollTop = backTop - speedTop;
        if (backTop <= 10) {
          clearInterval(timer);
        }
      }, 30);
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep img{
  width: 100%;
  height: auto;
}
.banner-bg {
  width: 100%;
  height: 6.628rem;
}
.header {
  margin-bottom: 0.66rem;
  box-shadow: 0px 10px 8px -12px rgba(0, 17, 67, 0.3);
  // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}
.article-box {
  width: 13.714rem;
  height: auto;
  margin: 0 auto;
  padding-top: 0.228rem;
  .article-title {
    font-size: 0.32rem;
    color: #323233;
    line-height: 0.32rem;
    text-align: center;
    margin-bottom: 0.182rem;
  }
  .article-time {
    font-size: 0.16rem;
    color: #606266;
    line-height: 0.16rem;
    margin-bottom: 0.73rem;
  }
  .article-content {
    font-size: 0.182rem;
    color: #666666;
    line-height: 0.457rem;
    margin-top: 0.457rem;
    margin-bottom: 0.685rem;
    img{
      width: 100% !important;
      height: auto !important;
    }
  }
  .article-list {
    width: 100%;
    height: auto;
    padding: 0.457rem 0;
    box-sizing: border-box;
    border-top: 1px solid #d8d8d8;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .pre {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      cursor: pointer;
      &:hover{
         h3{
           color: #1790ff;
         }
         p{
           color: #1790ff;
         }
      }
      h3 {
        font-size: 0.182rem;
        color: #323233;
        line-height: 0.182rem;
        margin-bottom: 0.182rem;
      }
      p {
        font-size: 0.182rem;
        color: #666666;
        line-height: 0.182rem;
      }
    }
    .next {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      cursor: pointer;
      &:hover{
         h3{
           color: #1790ff;
         }
         p{
           color: #1790ff;
         }
      }
      h3 {
        font-size: 0.182rem;
        color: #323233;
        line-height: 0.182rem;
        margin-bottom: 0.182rem;
      }
      p {
        font-size: 0.182rem;
        color: #666666;
        line-height: 0.182rem;
      }
    }
  }
}
.title {
  width: 13.714rem;
  font-size: 0.457rem;
  color: #323233;
  letter-spacing: 0;
  text-align: center;
  margin-top: 1.097rem;
  position: relative;
}

.details {
  font-size: 0.16rem;
  color: #1790ff;
  letter-spacing: 0;
  line-height: 0.365rem;
}
.showMore {
  font-size: 0.182rem;
  color: #909399;
  letter-spacing: 0;
  line-height: 0.205rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  .el-icon {
    margin-left: 8px;
  }
}
.tab-box {
  width: 100%;
  height: 0.685rem;
  background: #f1f4f8;
  .tab-operation {
    width: 13.714rem;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    .tab-title {
      padding-right: 0.182rem;
      font-family: MicrosoftYaHei-Bold;
      font-size: 0.16rem;
      color: #323233;
      letter-spacing: 0;
      position: relative;
      font-weight: bold;
      &::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 8px;
        background: #cad6ec;
        right: 0;
        top: 6px;
      }
    }
    .tab-item {
      margin-left: 0.182rem;
      display: flex;
      span {
        margin-right: 0.457rem;
        font-family: MicrosoftYaHei;
        font-size: 0.16rem;
        color: #323233;
        letter-spacing: 0;
        cursor: pointer;
        &.active {
          color: #1790ff;
        }
      }
    }
  }
}
.culture-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  h3 {
    font-family: MicrosoftYaHei-Bold;
    font-size: 0.32rem;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    line-height: 0.34rem;
    text-shadow: 0 2px 4px rgba(0, 17, 67, 0.4);
  }
  p {
    font-family: MicrosoftYaHei;
    font-size: 0.228rem;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    line-height: 0.34rem;
    text-shadow: 0 1px 1px rgba(0, 17, 67, 0.4);
    display: none;
  }
  &:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    h3 {
      margin-bottom: 0.228rem;
    }
    p {
      display: block;
    }
  }
}
@media only screen and (max-device-width: 768px) {
  .article-box {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0 0.228rem;
    box-sizing: border-box;
    padding-top: 0.228rem;
    .article-list {
      width: 100%;
      height: auto;
      padding: 0.457rem 0;
      box-sizing: border-box;
      border-top: 1px solid #d8d8d8;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .pre {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        cursor: pointer;
        h3 {
          font-size: 0.182rem;
          color: #323233;
          line-height: 0.182rem;
          margin-bottom: 0.182rem;
        }
        p {
          font-size: 0.182rem;
          color: #666666;
          line-height: 0.182rem;
        }
      }
      .next {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-top: 0.228rem;
        cursor: pointer;
        h3 {
          font-size: 0.182rem;
          color: #323233;
          line-height: 0.182rem;
          margin-bottom: 0.182rem;
        }
        p {
          font-size: 0.182rem;
          color: #666666;
          line-height: 0.182rem;
        }
      }
    }
  }
}
</style>